<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>test</title>
</head>

<body>
  <input type="text" id="message">
  <button id="send-button">发送</button>

  <script>
    let websocket = new WebSocket("ws://127.0.0.1:8888/test");

    websocket.onopen = function () {
      console.log("建立联系");
    }

    websocket.onclose = function () {
      console.log("关闭连接");
    }

    websocket.onerror = function () {
      console.log("连接出现异常 ");
    }

    websocket.onmessage = function (e) {
      console.log("发websocket收到消息! " + e.data);
    }

    let messageInput = document.querySelector('#message');
    let sendButton = document.querySelector('#send-button');
    sendButton.onclick = function () {
      console.log("websocket 发送消息: " + messageInput.value);
      websocket.send(messageInput.value);
    }

  </script>
</body>

</html>